<template>
  <Modal title="业务流程设置"  :width="600" v-model="model">
    <Form :model="form" :label-width="100" ref="form" class="ht400 scroll">
      <FormItem label="流程名称">
        <Select v-model="form.name" clearable filterable>
          <Option
            v-for="item in nameList"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </Option>
        </Select>
      </FormItem>
      <FormItem label="流程节点">
        <div v-for="(item, i) in processList" :key="item.id">
          <Select v-model="item.value" class="wp80 mb" clearable filterable>
            <Option
              v-for="item in process"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </Option>
          </Select>
          <Icon type="ios-trash" size="20" class="cursor" title="删除节点" @click="onDeleteProcess(i)"/>
          <Icon type="md-add" size="20" class="cursor" title="新增节点" @click="onAddProcess" v-if="i === processList.length - 1"/>
        </div>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button  size="large" type="text"  @click="onCancel">取消</Button>
      <Button type="primary" size="large"   @click="onDone">确认</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      model: false,
      form: {
        name: '1'
      },
      nameList: [{
        text: '签约信息',
        value: 1
      }, {
        text: '变更信息',
        value: 2
      }, {
        text: '解约信息',
        value: 3
      }, {
        text: '新增信息',
        value: 4
      }, {
        text: '门店基金',
        value: 5
      }],
      process: [{
        text: '经销商业务员',
        value: 1
      }, {
        text: '经销商业务经理',
        value: 2
      }, {
        text: '品牌业务代表',
        value: 3
      }, {
        text: '品牌大区经理',
        value: 4
      }, {
        text: '渠道管理员',
        value: 5
      }, {
        text: '业务总经理',
        value: 6
      }],
      processList: [{
        value: 1
      }]
    }
  },
  methods: {
    open(row) {
      this.model = true
    },
    onCancel() {
      this.model = false
      this.$refs['form'].resetFields()
    },
    onAddProcess() {
      let target = {
        value: 1
      }
      this.processList.push(target)
    },
    onDeleteProcess(i) {
      let length = this.processList.length
      if (length < 2) {
        this.$Notice.warning({
          title: "不能再删除了"
        })
        return
      } else {
        this.processList.splice(i, 1)
      }
    },
    onDone() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // let param = {}
          // this.$jsonPost('', param).then(data => {
          //   this.$Notice.success({
          //     title: (this.ruleForm.id ? '编辑' : '新增') + '成功'
          //   })
          //   this.$emit('complete')
          //   this.model = false
          // }).catch((res) => {
          // })
        }
      })
    }
  }
}
</script>

